<script setup>
//创建表单登录对象
import {ref, toRaw} from 'vue'
import {ElMessage} from "element-plus";
import {doPost} from "@/util/request.js";
import {md5} from "js-md5";
import {TOKEN_NAME} from "@/util/constants.js";
import router from "@/router/router.js";
import {showMessage} from "@/util/message.js";

const loginForm = ref({})

//创建表单验证响应式对象
const LoginFormRef = ref({})
//验证规则
const rules = {
  loginName: [
    {required: true, message: '请输入登录名', trigger: 'blur'},
    {min: 5, max: 10, message: '长度在5 到 10 个字符', trigger: 'blur'}
  ],
  loginPwd: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
  ]
}
//提交表单
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      //向后端服务器发送请求
      loginForm.value.loginPwd = md5(loginForm.value.loginPwd)
      doPost('/operator/login', toRaw(loginForm.value)).then(res => {
        if (res.data.code === 200) {
          //保存登录信息到session
          sessionStorage.setItem(TOKEN_NAME, JSON.stringify(res.data.data))
          //保存登录信息到本地
          localStorage.setItem(TOKEN_NAME, JSON.stringify(res.data.data))
          //跳转到首页
          // window.location.href = '/index'
          router.push({
            path: '/index',
          })
          //登录成功
          showMessage('登录成功', 'success')
        } else {
          showMessage('登录失败' + res.data.msg, 'error')
        }
      })

    } else {
      ElMessage.warning('请输入正确的账号和密码')
      return false;
    }
  })
}
/**
 * 重置表单
 * @param formEl
 */
const resetForm = () => {
  LoginFormRef.value.resetFields();
}

</script>


<template>
  <el-container>
    <!--左侧：侧边栏容器-->
    <el-aside>
      <img class="login-img" src="../assets/gq.jpg" alt="登录图片">
      <div class="login-text">欢迎使用动付通管理系统</div>
    </el-aside>

    <!--右侧：主要区域容器-->
    <el-main>
      <h3 style="margin-top: 200px;margin-left: 38%">欢迎登录</h3>

      <el-form
          ref="LoginFormRef"
          style="max-width: 300px;margin-left: 25%;margin-right: 35%"
          label-width="auto"
          :model="loginForm"
          :rules="rules"
          status-icon>
        <el-form-item label="帐号:" prop="loginName">
          <el-input v-model="loginForm.loginName" placeholder="请输入账号"/>
        </el-form-item>

        <el-form-item label="密码:" prop="loginPwd">
          <el-input type="password" v-model="loginForm.loginPwd" placeholder="请输入密码"/>
        </el-form-item>

        <el-form-item label=" ">
          <el-button type="primary" @click="submitForm(LoginFormRef)">登录</el-button>
          <el-button @click="resetForm(LoginFormRef)">重置</el-button>
        </el-form-item>
      </el-form>


    </el-main>
  </el-container>

</template>

<style scoped>
.el-aside {
  /*background-color: #909399;*/
  height: calc(97vh);
  width: 45%;
  text-align: center;
}

.login-text {
  color: #333333;
  font-size: 30px;
}

.login-img {
  width: 100%;
  //height: 30%;
  margin-top: 150px;
}

/*.el-main {
  color: #333;
  text-align: center;
}*/
.el-button, .el-checkbox {
  margin-left: 15%;
}
</style>